<template>
  <el-dialog title="请拖动滑块到指定位置" :visible.sync="dialogVisible" width="380px" :center="true">
    <slide-verify
      :l="42"
      :r="10"
      :w="310"
      :h="155"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :slider-text="text"
      style="margin:auto"
      ref="slideblock"
    ></slide-verify>
  </el-dialog>
</template>

<script>
export default {
   name: 'App',
    data(){
        return {
             text: '向右滑' ,// 图片滑动验证码底部文字，
             dialogVisible :false
        }
    },
    methods: {
        onSuccess(){
              this.$refs.slideblock.reset();     //重置组件    
         this.dialogVisible = false;        //隐藏组件
         if( this.islogin ){
          //  console.log(this.islogin)
             this.passwordLogin1();判断是否其他方式登录
         } else {
            this.$message({
              message: '验证成功！',
              type: 'success'
            });
             this.getVerificationCode1(); 登录接口
         }                                  //图片校验成功 
        },
        onFail(){
            this.$message.error("验证未通过！");
        this.$refs.slideblock.reset();      //重置组件
        this.dialogVisible = false;         //隐藏组件
        },
        onRefresh(){
             this.$message({
          message: '刷新成功！',
          type: 'success'
         });
        this.$refs.slideblock.reset();      //重置组件
        }
    }
}
</script>

<style>
</style>